<template>
  <n-form :model="testForm">
    <n-form-item path="name">
      <n-input v-model:value="testForm.name"></n-input>
    </n-form-item>
  </n-form>
  <n-tabs type="line" :animated="true">
    <template v-for="(item, index) in testForm.children" :key="index">
      <n-tab-pane :name="index" :tab="index">
        <n-form :model="item">
          <n-form-item>
            <n-input v-model:value="item.childName"></n-input>
          </n-form-item>
        </n-form>
      </n-tab-pane>
    </template>
  </n-tabs>
  <n-button @click="addTab">加一个上去</n-button>
</template>

<script lang="ts" setup>
const testForm = ref({
  name: "主表名",
  children: [
    {
      childName: "子表名1",
    },
    {
      childName: "子表名2",
    },
  ],
});

const addTab = () => {
  const length = testForm.value.children.length + 1;
  testForm.value.children.push({
    childName: "子表名" + length,
  });
};
</script>

<style scoped></style>
